<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心形</title>
    <style>
        *{
            max-resolution: 0;
            padding: 0;
        }
        #box{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            box-shadow: 0 0 5px blue;
            width: 100px;
            height: 160px;
            margin: 100px auto;
            transform-style: preserve-3d;
            tranform-origin:center center -50px;
            animation:heart 10s infinite linear;
        }
        #box div {
            width: 100px;
            height: 160px;
            border-radius: 50%;
            border: 1px solid red;
            border-width: 1px 1px 0 0;
            border-radius: 50% 50% 0 / 40% 50% 0;
            position: absolute;
            left: 0;
            top: 0;

        }
        @keyframes heart {
            to{
                transform: rotateY(360deg)  rotateX(360deg);
            }

        }
    </style>
</head>
<body style="background: #000;">
<div id="box">
</div>
<script>
//    querySelectorAll();只要调用querySelectorAll()都会返回一个StaticNodeList对象不管匹配的元素有几个；(Nodelist是一个集合)
//    如果没有匹配，那么StaticNodeList为空。
//    querySelectorAll()和querySelector()一样存在与Document和Element类型上。
//    eg:var images = document.getElementById("myDiv").querySelectorAll("img");
//    eg:var selected = document.querySelectorall(".selected");
//    eg:var selected = document.querySelectorall("p a");p中所有a标签
    var oBox=document.querySelectorAll("#box")[0];
    for(var i=1;i<=36;i++){
        var oDiv=document.createElement("div");
        oDiv.style.transform="rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";
        oBox.appendChild(oDiv);
    }

</script>
</body>
</html>